<template >
 <div style="margin-bottom: 7vm;">
   <div id="nav">商品分类</div>
   <div class="fl" >
      <div class="list" v-for="(item,index) in myData.ProductClassList" :key="item">
          <span class="sptext" @click="choose(index)" :class=" oindex==index ? 'bg':''">{{item.productName}}</span>
      </div>
   </div>
    <div id="rightBox">
        <!-- 配饰分类 -->
        <div id="typeList" v-if="acc.accList['data'] && oindex==0" >
              <span style="font-size:0.9rem">{{acc.accList['data'][0].mingc}}</span>
              <!-- <router-link :to="{path:'/searchGoods',query:{toPath:'/spsp',}}"> -->
             <div id="radiubox">
                 <div @click="toSearchGoods('/spsp',item1.cateName)" v-for="(item1,index1) in acc.accList['data'][0].chidren" :key="index1">
                    <img :src="item1.src" style="marginLeft:5px"/><br/>
                    <span style="font-size:12px;marginLeft:15vm">{{item1.name}}</span>
                </div>
             </div>
            <!-- </router-link> -->

           <span style="font-size:14px">{{acc.accList.mini[0].mingc}}</span>
           <!-- <router-link :to="{path:'/searchGoods',query:{toPath:'/spsp'}}"> -->
             <div id="radiubox">
                 <div @click="toSearchGoods('/spsp',item2.cateName)" v-for="(item2,index2) in acc.accList.mini[0].chidren" :key="index2">
                    <img :src="item2.src" width="30vw" height="55%" style="marginLeft:5px"/><br/>
                    <span style="font-size:12px;marginLeft:15px">{{item2.name}}</span>
                 </div>
             </div>  
            <!-- </router-link> -->
            <span style="font-size:14px">{{acc.accList.aggse[0].mingc}}</span>
            <!-- <router-link to="/searchGoods"> -->
             <div id="radiubox">
                 <div @click="toSearchGoods('/spsp',item3.cateName)" v-for="(item3,index3) in acc.accList.aggse[0].chidren" :key="index3">
                    <img :src="item3.src" width="30vw" height="55%" style="marginLeft:5px"/><br/>
                    <span style="font-size:12px;marginLeft:15px">{{item3.name}}</span>
                 </div>
             </div> 
            <!-- </router-link> -->
                <span style="font-size:14px">{{acc.accList.shoubiao[0].mingc}}</span>
                <!-- <router-link to="/searchGoods"> -->
             <div id="radiubox">
                 <div @click="toSearchGoods('/spsp',item4.cateName)" v-for="(item4,index4) in acc.accList.shoubiao[0].chidren" :key="index4">
                    <img :src="item4.src" width="30vw" height="55%" style="marginLeft:5px"/><br/>
                    <span style="font-size:12px;marginLeft:15px">{{item4.name}}</span>
                 </div>
             </div>
            <!-- </router-link> -->
              <span style="font-size:14px">{{acc.accList.yangjing[0].mingc}}</span>
              <!-- <router-link to="/searchGoods"> -->
             <div id="radiubox">
                 <div @click="toSearchGoods('/spsp',item5.cateName)" v-for="(item5,index5) in acc.accList.yangjing[0].chidren" :key="index5">
                    <img :src="item5.src" width="30vw" height="55%" style="marginLeft:5px"/><br/>
                    <span style="font-size:12px;marginLeft:15px">{{item5.name}}</span>
                 </div>
             </div>
            <!-- </router-link> -->
       </div> 
        <!-- 女装 -->
      
        <div id="typeList" v-if="oindex==1">
              <span style="font-size:14px">{{cates.classList['data'][0].mingc}}</span>
             <!-- <router-link to="/searchGoods"> -->
             <div id="radiubox"  >
                 <div  @click="toSearchGoods('/xrth',item1.cateName)" v-for="(item1,index1) in cates.classList['data'][0].chidren" :key="index1">
                    <img :src="item1.src" width="30vw" height="55%" style="marginLeft:5px"/><br/>
                    <span style="font-size:12px;marginLeft:15px">{{item1.name}}</span>
                 </div>
             </div>
             <!-- </router-link> -->
              <span style="font-size:14px">{{cates.classList.mini[0].mingc}}</span>
              <!-- <router-link to="/searchGoods"> -->
             <div id="radiubox"  >
                 <div  @click="toSearchGoods('/xrth',item1.cateName)" v-for="(item1,index1) in cates.classList.mini[0].chidren" :key="index1">
                    <img :src="item1.src" width="30vw" height="55%" style="marginLeft:5px"/><br/>
                    <span style="font-size:12px;marginLeft:15px">{{item1.name}}</span>
                 </div>
             </div>
             <!-- </router-link> -->
               <span style="font-size:14px">{{cates.classList.shangyi[0].mingc}}</span>
             <!-- <router-link to="/searchGoods"> -->
             <div id="radiubox"  >
                 <div  @click="toSearchGoods('/xrth',item1.cateName)" v-for="(item1,index1) in cates.classList.shangyi[0].chidren" :key="index1">
                    <img :src="item1.src" width="30vw" height="55%" style="marginLeft:5px"/><br/>
                    <span style="font-size:12px;marginLeft:15px">{{item1.name}}</span>
                 </div>
             </div>
              <!-- </router-link> -->
               <span style="font-size:14px">{{cates.classList.taozhuang[0].mingc}}</span>
               <!-- <router-link to="/searchGoods"> -->
             <div id="radiubox"  >
                 <div  @click="toSearchGoods('/xrth',item1.cateName)" v-for="(item1,index1) in cates.classList.taozhuang[0].chidren" :key="index1">
                    <img :src="item1.src" width="30vw" height="55%" style="marginLeft:5px"/><br/>
                    <span style="font-size:12px;marginLeft:15px">{{item1.name}}</span>
                 </div>
             </div>
             <!-- </router-link> -->
              <span style="font-size:14px">{{cates.classList.xiazhuang[0].mingc}}</span>
              <!-- <router-link to="/searchGoods"> -->
             <div id="radiubox"  >
                 <div  @click="toSearchGoods('/xrth',item1.cateName)" v-for="(item1,index1) in cates.classList.xiazhuang[0].chidren" :key="index1">
                    <img :src="item1.src" width="30vw" height="55%" style="marginLeft:5px"/><br/>
                    <span style="font-size:12px;marginLeft:15px">{{item1.name}}</span>
                 </div>
             </div>
             <!-- </router-link> -->
       </div>
       
        <!-- 美妆装 -->
        <div id="typeList" v-if="oindex == 2">
              <span style="font-size:14px">{{mz.mzList.box[0].mingc}}</span>
              <router-link to="/searchGoods">
             <div id="radiubox"  >
                 <div v-for="(item1,index1) in mz.mzList.box[0].chidren" :key="index1">
                    <img :src="item1.src" width="30vw" height="55%" style="marginLeft:5px"/><br/>
                    <span style="font-size:12px;marginLeft:15px">{{item1.naem}}</span>
                 </div>
             </div>
            </router-link>
              <span style="font-size:14px">{{mz.mzList.dadt[0].mingc}}</span>
              <router-link to="/searchGoods">
             <div id="radiubox"  >
                 <div v-for="(item1,index1) in mz.mzList.dadt[0].chidren" :key="index1">
                    <img :src="item1.src" width="30vw" height="55%" style="marginLeft:5px"/><br/>
                    <span style="font-size:12px;marginLeft:15px">{{item1.naem}}</span>
                 </div>
             </div>
            </router-link>
               <span style="font-size:14px">{{mz.mzList.afaef[0].mingc}}</span>
               <router-link to="/searchGoods">
             <div id="radiubox"  >
                 <div v-for="(item1,index1) in mz.mzList.afaef[0].chidren" :key="index1">
                    <img :src="item1.src" width="30vw" height="55%" style="marginLeft:5px"/><br/>
                    <span style="font-size:12px;marginLeft:15px">{{item1.naem}}</span>
                 </div> 
             </div>
            </router-link>
                <span style="font-size:14px">{{mz.mzList.keir[0].mingc}}</span>
                <router-link to="/searchGoods">
             <div id="radiubox"  >
                 <div v-for="(item1,index1) in mz.mzList.keir[0].chidren" :key="index1">
                    <img :src="item1.src" width="30vw" height="55%" style="marginLeft:5px"/><br/>
                    <span style="font-size:12px;marginLeft:15px">{{item1.naem}}</span>
                 </div>
             </div>
            </router-link>
       </div>
       <!-- 彩装 -->
        <div id="typeList" v-if="oindex==3">
              <span style="font-size:14px">{{cates.classList['data'][0].mingc}}</span>
              <router-link to="/searchGoods">
             <div id="radiubox"  >
                 <div v-for="(item1,index1) in cates.classList['data'][0].chidren" :key="index1">
                    <img :src="item1.src" width="30%" height="55%" style="marginLeft:5px"/><br/>
                    <span style="font-size:12px;marginLeft:15px">{{item1.name}}</span>
                 </div>
             </div>
            </router-link>
              <span style="font-size:14px">{{cates.classList.mini[0].mingc}}</span>
             <div id="radiubox"  >
                 <div v-for="(item1,index1) in cates.classList.mini[0].chidren" :key="index1">
                    <img :src="item1.src" width="30%" height="55%" style="marginLeft:5px"/><br/>
                    <span style="font-size:12px;marginLeft:15px">{{item1.name}}</span>
                 </div>
             </div>
               <span style="font-size:14px">{{cates.classList.shangyi[0].mingc}}</span>
             <div id="radiubox"  >
                 <div v-for="(item1,index1) in cates.classList.shangyi[0].chidren" :key="index1">
                    <img :src="item1.src" width="30vw" height="55%" style="marginLeft:5px"/><br/>
                    <span style="font-size:12px;marginLeft:15px">{{item1.name}}</span>
                 </div>
             </div>
               <span style="font-size:14px">{{cates.classList.taozhuang[0].mingc}}</span>
             <div id="radiubox"  >
                 <div v-for="(item1,index1) in cates.classList.taozhuang[0].chidren" :key="index1">
                    <img :src="item1.src" width="30vw" height="55%" style="marginLeft:5px"/><br/>
                    <span style="font-size:12px;marginLeft:15px">{{item1.name}}</span>
                 </div>
             </div>
              <span style="font-size:14px">{{cates.classList.xiazhuang[0].mingc}}</span>
             <div id="radiubox"  >
                 <div v-for="(item1,index1) in cates.classList.xiazhuang[0].chidren" :key="index1">
                    <img :src="item1.src" width="30vw" height="55%" style="marginLeft:5px"/><br/>
                    <span style="font-size:12px;marginLeft:15px">{{item1.name}}</span>
                 </div>
             </div>
       </div>
    </div>
  </div>
  <!-- <div class="bottomNav">
                <router-link to="/home">首页</router-link>
                <router-link to="/productCate">分类</router-link>
                <router-link to="/messageList">消息</router-link>
                <router-link to="/shoppingCart">购物车</router-link>
                <router-link to="/mypage">我的</router-link>
            </div> -->
            <div>
            <van-tabbar v-model="active">
            <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
            <van-tabbar-item icon="search">分类</van-tabbar-item>
            <van-tabbar-item icon="chat-o" to="/messageList">消息</van-tabbar-item>
            <van-tabbar-item icon="cart-o" to="/shoppingCart">购物车</van-tabbar-item>
            <van-tabbar-item icon="setting-o" to="/mypage">我的</van-tabbar-item>
            </van-tabbar>
        </div>
</template>

<script setup lang="ts">
     import {onMounted, reactive, ref} from 'vue'
     import {getProductClass,getXiari,getMeizhuan} from '@/api/getCateList';
     import {useRoute,useRouter} from 'vue-router'
    const router = useRouter();
    let route = useRoute();
        let active = ref(1)
        let myData:any = reactive({
            ProductClassList:[
                    {'id':1,'productName':"配饰"},
                    {'id':2,'productName':"女装"},
                    {'id':3,'productName':"美妆"},
                    {'id':4,'productName':"彩妆"},
                    {'id':5,'productName':"洗护"},
                    {'id':6,'productName':"运动"},
                    {'id':7,'productName':"箱包"},
                    {'id':8,'productName':"内衣"},
                    {'id':9,'productName':"百货"},
                    {'id':10,'productName':"家电"},
                    {'id':11,'productName':"家居"},
                    {'id':12,'productName':"成人"},
                    {'id':13,'productName':"数码"},
                    {'id':14,'productName':"护肤"},
                    {'id':15,'productName':"男装"},
                    {'id':16,'productName':"萌宠"},
                    {'id':17,'productName':"配饰"},
                    {'id':18,'productName':"男鞋"},
            ]
        })
        //饰品分类
        let acc = reactive({
            accList:[]
            })
        //女装
        let cates = reactive({
            classList:[]
            })
        //美妆
        let mz = reactive({
            mzList:[]
        })
        let oindex =ref(0);
        let choose = (index:number)=>{
              oindex.value=index;
            //  console.log(index,oindex);          
        }
        onMounted(()=>{
                //饰品
                getProductClass()
                .then(res=>{
                 acc.accList= res.data;
                   console.log(res.data,'装饰');
                 
                   
                })
                //女装
                getXiari()
                .then(res=>{
                   // console.log(res.data);
                    cates.classList = res.data
                    console.log(cates.classList );
                    
                })
                //美妆
                getMeizhuan()
                .then(res=>{
                   mz.mzList = res.data
                   //console.log(res.data);
                   
                })
        })

        let toSearchGoods = (path:string,val:string)=>{
        router.push({path:'/searchGoods',query:{toPath:path,cateName:val}})

        }

</script>

<style scoped>

    .bottomNav{
        position: fixed;
        width: 100%;
        height: 9.3rem;
        bottom:0;
        background: #ffffff;
        border-top:3px solid #eae9e5;
        z-index: 999;
        left: 0;
        display: flex;
        justify-content: space-around;
        line-height: 150px;
    }
   a{
       list-style: none;
       text-decoration: none;
       color:black
   }
   #nav{
       width: 100%;
       height:4em;
       line-height:90px;
       background-color: #c1ab96;
       padding-left: 10px;
       font-weight: 700;
       color:#fff;
       position: fixed;
       top:0;
       left:0;      
   }
  img{
    width:20vw;
    height:17vw;
  }
   .fl{
       float: left;
       width: 18vw;
       height: 200vw;
       overflow-y: auto;
       margin-top: 5px;
       
   }
   .box{
       width: 400px;
       
   }
   #rightBox{
       margin-top: 70px;
       margin-left: 70px;
       width: 76%;
        height: 220vw;
       background-color: #eae9e5;
       overflow-y: auto;
       padding:10px 0 0 10px ;
   }
   
   /*圆角背景框*/
   #radiubox{
    width: 89%;
     border-radius:5px;
     margin: 1em 0.5em;
     background:#fff;
     display: flex;
     flex-direction:row;
     flex-wrap: wrap;
     
   }
   .list{
       /*width: 120px;*/
       padding:0 0 0 2vw; 
       height: 10vw;
   }
   .list1{
       height: 75px;
   }
   .bg{
     background-color: #c1ab96;
   }
   .sptext{
       margin-top: 10px;
       display: block;
       width: 60px;
       font-size: 14px;
       height: 25px;
       line-height: 25px;
       text-align: center;
       border-radius: 30px;
   }
   span:hover{
       cursor: pointer;
   }
</style>